<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue';
import { getLeaderListApi } from '@/common/apis/organization';
import { getSalarysListApi, getSalarysCompanySettingsApi } from '@/common/apis/wages';
import { useRouter } from 'vue-router';
import type { SwitchPagination } from '@/common/types/information-type';
import backgHumanIncrease from '@/common/components/backg-wages/backg-salary-increase.vue'
import backgSetSalary from '@/common/components/backg-wages/backg-set-salary.vue'

const router = useRouter();
// 聘用形式 多选框
const checked1 = ref(false);
// 部门 多选框
const checked = ref<Record<number, boolean>>({});
const LeaderListData = ref();
// 员工列表数据
const salarysListData = ref();
// 企业设置当月工资数据
const salarysData = ref()
// 组件弹框
const humanModel = ref()
const setSalaryModel = ref<InstanceType<typeof backgSetSalary> | null>(null)

const columns = [
  {
    title: '序号',
    dataIndex: 'SerialNumber',
  },
  {
    title: '姓名',
    dataIndex: 'username',
  },
  {
    title: '手机',
    dataIndex: 'mobile',
  },
  {
    title: '工号',
    dataIndex: 'workNumber',
  },
  {
    title: '聘用形式',
    dataIndex: 'formOfEmployment',
  },
  {
    title: '部门',
    dataIndex: 'departmentName',
  },
  {
    title: '入职时间',
    dataIndex: 'timeOfEntry',
  },
  {
    title: '工资基数',
    dataIndex: 'currentPostWage',
  },
  {
    title: '津贴方案',
    dataIndex: 'subsidyName',
  },
  {
    title: '操作',
    dataIndex: 'Operation',
  },
];

// 分页配置
const pagination = reactive({
  page: 1,
  pagesize: 8,
  pageSize: 8, // 每页条数
  total: 0, // 总数据条数
  departmentChecks: [] as number[], // 筛选部门id
});

// 获取部门数据
const getLeaderListData = async () => {
  const res = await getLeaderListApi();
  LeaderListData.value = res.data.data;
  console.log(LeaderListData.value);
};

// 获取企业是否设置当月工资数据
const getSalarysCompanySettingsData = async () => {
  const res = await getSalarysCompanySettingsApi()
  salarysData.value = res.data.data
  console.log(salarysData.value, '获取企业是否设置当月工资数据')
}

// 获取员工列表数据
const getSalarysListData = async () => {
  // 将 departmentChecks 转换为逗号分隔的字符串
  const departmentChecksString = pagination.departmentChecks.join(',');
  // 调用 API 时传递 departmentChecks
  const res = await getSalarysListApi({
    ...pagination,
    departmentChecks: departmentChecksString,
  });
  console.log(res, '员工列表数据')
  salarysListData.value = res.data.data.rows;
  // 获取分页总条数
  pagination.total = res.data.data.total;
};

// 点击筛选
const onCheckbox = (id: number) => {
  checked.value[id] = !checked.value[id];
  // 更新部门筛选条件
  if (checked.value[id]) {
    pagination.departmentChecks.push(id);
  } else {
    const index = pagination.departmentChecks.indexOf(id);
    if (index !== -1) {
      pagination.departmentChecks.splice(index, 1);
    }
  }
  // 重新获取数据
  getSalarysListData();
};

// 点击调薪
const changeSalary = (id: number) => {
  humanModel.value?.showModal(id)
  console.log(id, '点击调薪')
}

// 点击定薪
const onSetsalary = (id: number) => {
  setSalaryModel.value?.showModal(id) // 直接传递 id
  console.log(id, '点击定薪')
}

// 点击分页获取数据
const handleTableChange = async (page: SwitchPagination) => {
  pagination.page = page.current; // 更新当前页码
  pagination.pagesize = page.pageSize; // 更新当前条数
  await getSalarysListData();
};

onMounted(() => {
  getLeaderListData();
  getSalarysListData();
  getSalarysCompanySettingsData()
});
</script>

<template>
  <div class="role">
    <div class="role-frame">
      <a-button @click="router.push('/subsidy')">设置</a-button>
      <a-button v-if="salarysData" type="primary" @click="router.push(`/wages/report/${salarysData.dataMonth}`)"
        class="role-frame-report">{{ salarysData.dataMonth
        }}报表</a-button> 
    </div>
    <div class="role-frame">
      <div>
        聘用形式： <a-checkbox v-model:checked="checked1">正式</a-checkbox> <a-checkbox
          v-model:checked="checked1">非正式</a-checkbox>
      </div>
      <div>
        部门： <a-checkbox class="role-frame-checkbox" v-for="item in LeaderListData" :key="item.id"
          :checked="checked[item.id]" @change="onCheckbox(item.id)">{{ item.name }}</a-checkbox>
      </div>
    </div>
    <div class="role-list">
      <a-table :columns="columns" :data-source="salarysListData" @change="handleTableChange" :pagination="pagination"
        bordered>
        <template #bodyCell="{ column, record }">
          <!-- 序号 -->
          <template v-if="column.dataIndex === 'SerialNumber'">
            <span>{{ record.id }}</span>
          </template>
          <template v-if="column.dataIndex === 'formOfEmployment'">
            {{ record.formOfEmployment === 1 ? '正式' : '非正式' }}
          </template>
          <!-- 操作 -->
          <template v-else-if="column.dataIndex === 'Operation'">
            <a-button type="primary" v-if="record.currentBasicSalary + record.currentPostWage > 0"
              @click="changeSalary(record.id)">调薪</a-button>
            <a-button @click="onSetsalary(record.id)" danger v-else>定薪</a-button>
            <a-button class="role-list-button">查看</a-button>
          </template>
        </template>
      </a-table>
    </div>

    <!-- 调薪 -->
    <backgHumanIncrease ref="humanModel" />
    <!-- 定薪 -->
    <backgSetSalary ref="setSalaryModel" />
  </div>
</template>

<style lang="scss" scoped>
.role {
  width: 100%;

  &-frame {
    padding: 20px;
    margin-bottom: 10px;
    background-color: white;

    &-report {
      margin-left: 10px;
    }

    &-checkbox {
      padding: 5px;
    }
  }

  &-list {
    &-button {
      margin-left: 10px;
    }
  }
}

.editable-row-operations a {
  margin-right: 8px;
}
</style>